<!DOCTYPE html>
<html>
<body>
  <h4 id="d1">Item1</h4>
  <h4 id="d2" aria-grabbed="true">Item2</h4>
  <h4 id="d3" aria-grabbed="false">Item3</h4>
  <h4 id="d4" aria-grabbed="true">Item4</h4>
  <script>
    function go() {
      // Set aria-grabbed from undefined [removed]->true; should fire an event.
      document.getElementById('d1').setAttribute('aria-grabbed', 'true');

      // Set aria-grabbed from true->false; should fire an event.
      document.getElementById('d2').setAttribute('aria-grabbed', 'false');

      // Set aria-grabbed from false->true; should fire an event.
      document.getElementById('d3').setAttribute('aria-grabbed', 'true');

      // Set aria-grabbed from true->undefined [removed]; should fire an event.
      document.getElementById('d4').removeAttribute('aria-grabbed');
    }
  </script>
</body>
</html>
